<!--
 * @Author: zcl
 * @Date: 2024-12-10 10:21:07
 * @LastEditors: 张辰龙 zhangchenlong@julimeng.com
 * @LastEditTime: 2025-06-23 13:49:51
 * @FilePath: /ssnewapp/pageToolbox/address/selectCityList.vue
-->
<template>
    <view>
        <view class="serarch-box paddingL10" style="padding-top: 20rpx">
            <view class="row">
                <uni-easyinput @input="getCityList" @clear="clearSearch" :placeholderStyle="'font-size: 30rpx'"
                    v-model.trim="searchValue" placeholder="请输入要查询的地区">
                    <template slot="left">
                        <image :src="require('../static/select/sousuo.png')"
                            style="width: 34rpx; height: 34rpx; margin-left: 30rpx;">
                        </image>
                    </template>
                </uni-easyinput>
            </view>
        </view>
        <view class="" style="display: flex;  align-items: center; padding: 20rpx;">
            <image :src="require('../static/select/dingweixiao.png')"
                style="width: 22rpx; height: 26rpx; margin-right: 10rpx;">
            </image>
            <view class="repAddress">当前定位城市 {{ city }}</view>
        </view>
        <view class="scroll" style="margin-top: 100rpx;" v-if="!loading">
            <uni-indexed-list :options="areaList" :showSelect="false" @click="bindClick">
            </uni-indexed-list>
        </view>
        <view v-else>
            <uv-loading-icon :show="loading" text="加载数据中...."></uv-loading-icon>
        </view>
    </view>
</template>

<script>
import pinyin from "../static/js/pinyin.js";
import { getCityList } from "@/api/tools.js";
import Routine from "@/libs/routine.js";
import residenceTime from "@/mixins/residenceTime";
export default {
     mixins: [residenceTime],
    data() {
        return {
            indexList: [],
            itemArr: [],
            loading: false,
            searchValue: '',
            areaList: [],
            city: ''
        };
    },
    // #ifdef MP-WEIXIN
    options: {
        styleIsolation: 'shared' // 解除样式隔离
    },
    // #endif

    methods: {
         pageViewTrack(stayTime) {
            const route = this.$util.getCurrentRoute()
            let params = {
                Um_Key_SourcePage: route.path,
                Um_Key_Duration: stayTime,
            }
            this.$umaTrack.pageViewTrack(params)
        },
        getAddressInfo(lon, lat) {
            let that = this;
            uni.request({
                url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',
                method: 'GET',
                data: {
                    key: '329b1e97a844a0cf2be6e3046a5632cc',
                    location: `${lon}, ${lat}`
                },
                success: async (data) => {
                    const cityStr = data.data.regeocode.addressComponent;
                    that.city = cityStr.city.length ? cityStr.city.substring(0, 2) : cityStr.province.substring(0, 2);
                },
                fail(err) {
                    console.log(err);
                }
            });
        },
        getLocation(num) {
            Routine.gettLocation().then(async res => {
                await this.getAddressInfo(res.longitude, res.latitude)
            })
        },
        search() {
            this.getCityList()
        },
        clearSearch() {
            this.searchValue = ''
            this.getCityList()
        },
        bindClick(e) {
            const idx = this.areaList.findIndex(v => v.letter === e.item.key)
            const obj = this.itemArr[idx].find(v => v.name === e.item.name)
            uni.$emit("selectCity", obj);
            setTimeout(() => {
                uni.navigateBack();
            }, 500);
        },
        getCityList() {
            this.loading = true;
            getCityList({
                keyword: this.searchValue
            }).then((res) => {
                let pin = new pinyin();
                let typeList = {};
                res.data.forEach((v) => {
                    let str = pin.getCamelChars(v.name).substring(0, 1);
                    if (typeList[str]) {
                        typeList[str].push(v);
                    } else {
                        typeList[str] = [v];
                    }
                });
                console.log("typeList", typeList)
                const entries = Object.entries(typeList);

                entries.sort((a, b) => a[0].localeCompare(b[0]));

                this.itemArr = entries.map(([_, value]) => value);
                this.indexList = entries.map(([key]) => key);
                console.log("this.indexList", this.indexList)
                console.log("this.itemArr", this.itemArr)
                this.areaList = this.itemArr.map((v, idx) => {
                    return {
                        data: v.map(v => v.name),
                        letter: this.indexList[idx],
                    }
                })

                this.loading = false;
            });
        },
    },
    onLoad() {
        this.$nextTick(() => {
            this.getCityList();
            this.getLocation()
        });
    },
};
</script>

<style lang="scss">
page {
    background-color: #fff !important;
}

/deep/ .uni-searchbar__cancel {
    color: #000 !important;
}

/deep/ .uv-index-anchor {
    background-color: #fff !important;
}

/deep/ .uv-index-list__letter__item {
    border-radius: 0%;
}

/deep/ .uni-indexed-list {
    top: 150rpx !important;
}

/deep/ .uni-indexed-list {
    left: 30rpx !important;
}

/deep/ .uni-indexed-list__item-container {
    padding-left: 0rpx !important;
}

/deep/ .uni-indexed-list__title-wrapper {
    background-color: #fff !important;
    color: #999 !important;
}

/deep/ .uni-indexed-list__title {
    padding: 30rpx 0rpx !important;
}

/deep/ .uni-indexed-list__menu-text--active {
    width: 34rpx !important;
    height: 34rpx !important;
    line-height: 34rpx !important;
    background: #FA7700 !important;
    color: #fff;
    border-radius: 0 !important;
}

.repAddress {
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
}

.serarch-box {
    //   margin-top: 160rpx;
    padding: 0 30rpx;
}

.list-cell {
    padding: 20rpx;
    overflow: hidden;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
    background-color: #fff;

    .line {
        width: 96%;
        height: 1px;
        margin-top: 20rpx;
        background-color: #e5e5e5;
    }
}

/deep/ .is-input-border {
    border: none !important;
    background-color: #f5f5f5 !important;
}

.cancleStyle {
    font-size: 32rpx;
    color: #2872FD;
    font-weight: 600;
    display: inline-block;
    width: 100rpx;
    text-align: center;
}
</style>
